<template>
  <el-dialog append-to-body title="查看物流" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'640px'">
    <div v-loading="loading">
        <div class="cell" v-if="expressDetail">
            <div class="cell_item">
                <span>发货方式：</span>
                <span>物流</span>
            </div>
            <div class="cell_item">
                <span>物流公司：</span>
                <span>{{expressDetail.expName}}</span>
            </div>
            <div class="cell_item">
                <span>运单号：</span>
                <span>{{expressNo}}</span>
            </div>
            <div class="cell_item">
                <span>物流跟踪: </span>
            </div>
            <div class="cell_item">
                <el-timeline v-if="expressActivities && expressActivities.length">
                    <el-timeline-item v-for="(activity, index) in expressActivities" :key="index" :timestamp="activity.status">{{activity.time}}</el-timeline-item>
                </el-timeline>
                <div v-else>暂无物流信息</div>
            </div>
        </div>
        <div v-else>暂无物流信息</div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button  @click="closeModal()">取消</el-button> -->
      <el-button type="primary" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetExpressDelivery } from '@/api/PublicServices';
export default {
  props: ['visible', 'expressNo'],
  data() {
    return {
      loading: false,
      expressDetail: null,
      expressActivities: []
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue, oldValue) {
        if (!newValue) return;
        if (!this.expressNo) return;
        this.searchExpress(this.expressNo);
      }
    }
  },
  methods: {
    closeModal() {
      this.$emit('update:visible', false);
      this.expressDetail = null;
      this.expressActivities = [];
    },
    searchExpress() {
        this.loading = true;
        GetExpressDelivery({ postCode: this.expressNo })
        .finally(() => this.loading = false)
        .then(data => {
            if (data.code == 200 && data.data) {
                this.expressDetail = data.data;
                this.expressActivities = JSON.parse(data.data.list);
            } else {
                this.expressDetail = null;
            }
        })
        .catch(error => {
            this.expressDetail = null;
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell {
    flex: 1;

    &.half {
        width: 50%;
    }

    .cell_item {
        padding: 7.5px 0;

        > span {
            display: inline-block;

            &:first-child {
                width: 7em;
            }

            &:last-child {
                width: calc(100% - 7.5em);
                color: gray;
            }
        }
    }
}
</style>
